<template>
  <div class="uploader-list">
    <slot :file-list="fileList">
      <ul>
        <li v-for="file in fileList" :key="file.id">
          <ChunkFileUploaderFile :file="file" :list="true" />
        </li>
      </ul>
    </slot>
  </div>
</template>

<script>
  import { uploaderMixin } from '../common/mixins'
  import ChunkFileUploaderFile from './ChunkFileUploaderFile'

  export default {
    name: 'ChunkFileUploaderList',
    components: { ChunkFileUploaderFile },
    mixins: [uploaderMixin],
    computed: {
      fileList() {
        return this.uploader.fileList
      }
    }
  }
</script>

<style>
  .uploader-list {
    position: relative;
  }

  .uploader-list > ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
</style>
